<template>
  <div class="Toppadding" v-if="shopAll">
      <my-head title="商品类别" :back='false'></my-head>

       <div class="sort">
        <div class="sort_left">
            <van-sidebar v-model="activeKey" @change="onChange" >
                <van-sidebar-item :title="item" :name='index' v-for="(item,index) in types" :key="index"/>
            </van-sidebar>
        </div>
          <div class="sort_right">
            <my-all :Allshop='shopAll'></my-all>
          </div>
     </div>

  </div>
</template>

<script>
export default {
data() {
  return {
   shopAll:null,
    activeKey:0,
    types:[],
    shouban:null
  }
},
methods: {
  //拿到所有分类的数据
  async getAll(){
   let res=await this.$ajax.getAll({
     shopId: 2233,
   })
   console.log(res);
   this.shopAll=res.data.vo
   console.log(this.shopAll[0].typeName);
   for(let i=0;i<this.shopAll.length;i++){
      this.types.push(this.shopAll[i].typeName)
   }
   console.log(this.types);
    //拿到分类中手办的数据化
    this.shouban=this.shopAll[0].categoryLogicVOList
  }
 

  ,
  onChange(index){
      console.log(index);
  }
},mounted() {
  this.getAll()
},
}

</script>

<style>

.sort{
  display: flex;
  width: 100%;
  justify-content: space-between;
  height:calc(100vh - 92px);

}
.sort_left{
  width: 100px;
  overflow: auto;
  overflow-x: hidden;

}
.sort_right{
  width: calc(100% - 100px);
  overflow: auto;
  overflow-x: hidden;
  background: white;
}
.van-sidebar{
  width: 100%;
}
.van-sidebar-item{
  background-color: transparent;
}
.van-sidebar-item--select{
  color: #fb7299;
  background: white;
}


</style>